<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.0
Version: 1.5
Author: KeenThemes
Website: http://www.keenthemes.com/
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
   <meta charset="utf-8" />
   <title>利导科技客户关系管理系统  | 新增跟进信息</title>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta content="width=device-width, initial-scale=1.0" name="viewport" />
   <meta content="" name="description" />
   <meta content="" name="author" />
   <meta name="MobileOptimized" content="320">
   <!-- BEGIN GLOBAL MANDATORY STYLES -->          
   <link href="${base}/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
   <link href="${base}/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
   <link href="${base}/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
   <!-- END GLOBAL MANDATORY STYLES -->
   <!-- BEGIN PAGE LEVEL STYLES -->
    <!-- BEGIN PAGE LEVEL STYLES -->
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/bootstrap-fileupload/bootstrap-fileupload.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/gritter/css/jquery.gritter.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/select2/select2_metro.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/clockface/css/clockface.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/bootstrap-datepicker/css/datepicker.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/bootstrap-timepicker/compiled/timepicker.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/bootstrap-colorpicker/css/colorpicker.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css" />
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/jquery-multi-select/css/multi-select.css" />
   <link href="${base}/assets/plugins/bootstrap-switch/static/stylesheets/bootstrap-switch-metro.css" rel="stylesheet" type="text/css"/>
   <link rel="stylesheet" type="text/css" href="${base}/assets/plugins/jquery-tags-input/jquery.tagsinput.css" />
   <!-- END PAGE LEVEL STYLES -->
   <!-- BEGIN THEME STYLES --> 
   <link href="${base}/assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
   <link href="${base}/assets/css/style.css" rel="stylesheet" type="text/css"/>
   <link href="${base}/assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
   <link href="${base}/assets/css/plugins.css" rel="stylesheet" type="text/css"/>
   <link href="${base}/assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
   <link href="${base}/assets/css/custom.css" rel="stylesheet" type="text/css"/>
   <!-- END THEME STYLES -->
   <link rel="shortcut icon" href="${base}/assets/img/favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">
	<#include "header.ftl">
   <div class="clearfix"></div>
   <!-- BEGIN CONTAINER -->
   <div class="page-container">
      <!-- BEGIN SIDEBAR -->
      <#include "main_menu.ftl">
      <!-- END SIDEBAR -->
      <!-- BEGIN PAGE -->
      <div class="page-content">
      	 <#include "changePassword.ftl">
         <#include "system-set.ftl">
         <!-- BEGIN PAGE HEADER-->
		 <div class="row">
			<div class="col-md-12">
			   <!-- BEGIN PAGE TITLE & BREADCRUMB-->
			   <h3 class="page-title">
			   New Tracking<small>Add a new tracking information for customer.</small>
			   </h3>
			   <ul class="page-breadcrumb breadcrumb">
			      <li>
			         <i class="icon-home"></i>
			         <a href="${base}/admin/admin!main.action">Home</a> 
			         <i class="icon-angle-right"></i>
			      </li>
			      <li>
			         <a href="#">Customer Management</a>
			         <i class="icon-angle-right"></i>
			      </li>
			      <li>
			      	<a href="${base}/admin/track!list.action">Tracks</a>
			      	<i class="icon-angle-right"></i>
			      </li>
			      <li>
			      	<a href="#">New Tracking</a>
			      </li>
			   </ul>
			   <!-- END PAGE TITLE & BREADCRUMB-->
			</div>
		 </div>
		 <!-- END PAGE HEADER-->
		<!-- BEGIN PAGE CONTENT-->
		<div class="row">
			<div class="col-md-12">
               <!-- BEGIN VALIDATION STATES-->
               <div class="portlet box blue">
                  <div class="portlet-title">
                     <div class="caption"><i class="icon-reorder"></i>Tracks Information</div>
                     <div class="tools">
                        <a href="javascript:;" class="collapse"></a>
                        <a href="#portlet-config" data-toggle="modal" class="config"></a>
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                     </div>
                  </div>
                  <div class="portlet-body form">
                     <!-- BEGIN FORM-->
                     <form action="${base}/admin/contacts!save.action" id="form_tracks" class="form-horizontal">
                        <div class="form-body">
                           <div class="alert alert-danger display-hide">
                              <button class="close" data-dismiss="alert"></button>
                              You have some form errors. Please check below.
                           </div>
                           <div class="alert alert-success display-hide">
                              <button class="close" data-dismiss="alert"></button>
                              Your form validation is successful!
                           </div>
                            <div class="row">
							   <!--/span-->
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">客户名称<span class="required">*</span></label>
							         <div class="col-md-9">
							         	<select class="form-control" id = "customer_id" name = "customer_id" >
							         		<option value = "" ></option>
							         		<#if customerList?exists>
								         		<#list customerList as customer>
								         			<option value = "${customer.id}" >${customer.shortName}</option>
								         		</#list>
							         		</#if>
							            </select>
							         </div>
							      </div>
							   </div>
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">跟进主题<span class="required">*</span></label>
							         <div class="col-md-9">
							            <input type="text" class="form-control" id = "theme" name = "theme">
							         </div>
							      </div>
							   </div>
							   <!--/span-->
							</div>
							<!--/row-->
							<div class="row">
							   <!--/span-->
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">联系人<span class="required">*</span></label>
							         <div class="col-md-9">
							            <select class="form-control" id = "contacts_name" name = "contacts_name" >
							            </select>
							         </div>
							      </div>
							   </div>
							   <!--/span-->
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">本次跟进时间</label>
							         <div class="col-md-9">
							            <div class="input-group input-medium date date-picker" data-date-format="yyyy/mm/dd" data-date-viewmode="years">
			                                <input type="text" class="form-control" readonly="" id = "track_time" name = "track_time">
			                                <span class="input-group-btn">
			                                <button class="btn default" type="button"><i class="icon-calendar"></i></button>
			                                </span>
			                             </div>
							         </div>
							      </div>
							   </div>
							</div>
							<!--/row-->        
							<div class="row">
							   
							   <!--/span-->
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">本次跟进方式</label>
							         <div class="col-md-9">
							            <select class="form-control" name = "track_ways" id = "track_ways" name = "track_ways" >
							               <option value=""></option>
							               <option value="电话拜访">电话拜访</option>
							               <option value="QQ问询">QQ问询</option>
							               <option value="其他">其他</option>
							            </select>
							         </div>
							      </div>
							   </div>
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">跟进前阶段</label>
							         <div class="col-md-9">
							             <input type = "text" class="form-control" name = "before_track_step" id = "before_track_step" >
							         </div>
							      </div>
							   </div>
							</div>   
							<div class="row">
							   
							   <!--/span-->
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">跟进后阶段</label>
							         <div class="col-md-9">
							             <select class="form-control" name = "after_track_step" id = "after_track_step" >
			                               <option value=""></option>
			                               <option value="售前跟踪">售前跟踪</option>
			                               <option value="合同执行">合同执行</option>
			                               <option value="售后服务">售后服务</option>
			                               <option value="合同期满">合同期满</option>
			                            </select>
							         </div>
							      </div>
							   </div>
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">本次跟进后分类</label>
							         <div class="col-md-9">
							           <select class="form-control" name = "catagory" id = "catagory">
			                               <option value=""></option>
			                               <option value="潜在客户">潜在客户</option>
			                               <option value="普通客户">普通客户</option>
			                               <option value="vip客户">vip客户</option>
			                               <option value="代理商">代理商</option>
			                               <option value="合作伙伴">合作伙伴</option>
			                               <option value="失效客户">失效客户</option>
			                            </select>
							         </div>
							      </div>
							   </div>
							</div> 
							<div class="row">
							   <!--/span-->
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">跟进人<span class="required">*</span></label>
							         <div class="col-md-9">
							            <input type="text" class="form-control" name = "tracker" id = "tracker" <#if tracker?exists>value = "${tracker}"</#if> readonly/>
							         </div>
							      </div>
							   </div>
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">下次跟进时间</label>
							         <div class="col-md-9">
							            <div class="input-group input-medium date date-picker" data-date-format="yyyy/mm/dd" data-date-viewmode="years">
			                                <input type="text" class="form-control" readonly="" id = "next_track_time" name = "next_track_time">
			                                <span class="input-group-btn">
			                                <button class="btn default" type="button"><i class="icon-calendar"></i></button>
			                                </span>
			                             </div>
							         </div>
							      </div>
							   </div>
							</div>
							<div class="row">
							   <!--/span-->
							   <div class="col-md-6">
							      <div class="form-group">
							         <label class="control-label col-md-3">本次跟进详情<span class="required">*</span></label>
							         <div class="col-md-9">
							            <textarea cols = "128" rows = "5" id = "track_detail" name = "track_detail" placeholder="本次跟进详情"></textarea>
							         </div>
							      </div>
							   </div>
							</div>   
							<div class="form-actions fluid">
	                           <div class="col-md-offset-3 col-md-9">
	                              <button type="submit" class="btn green"><i class="icon-ok"></i>Update</button>
	                              <button type="button" class="btn default"><i class="icon-remove"></i>Cancel</button>                              
	                           </div>
	                        </div>
                     </form>
                     <!-- END FORM-->
                  </div>
               </div>
               <!-- END VALIDATION STATES-->
            </div>
         </div>   
         <!-- END PAGE CONTENT-->
      </div>
      <!-- END PAGE -->	 
	</div>
	<!-- END CONTAINER -->
	<#include "footer.ftl">
   <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
   <#include "coreJsPlugins.ftl">
   <!-- BEGIN PAGE LEVEL PLUGINS -->
   <script type="text/javascript" src="${base}/assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/jquery-validation/dist/additional-methods.min.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/select2/select2.min.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script> 
   <script type="text/javascript" src="${base}/assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/ckeditor/ckeditor.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/fuelux/js/spinner.min.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/clockface/js/clockface.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/bootstrap-daterangepicker/moment.min.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script> 
   <script type="text/javascript" src="${base}/assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>  
   <script type="text/javascript" src="${base}/assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js"></script>   
   <script type="text/javascript" src="${base}/assets/plugins/jquery.input-ip-address-control-1.0.min.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/jquery-multi-select/js/jquery.multi-select.js"></script>
   <script type="text/javascript" src="${base}/assets/plugins/jquery-multi-select/js/jquery.quicksearch.js"></script>   
   <script src="${base}/assets/plugins/jquery.pwstrength.bootstrap/src/pwstrength.js" type="text/javascript" ></script>
   <script src="${base}/assets/plugins/bootstrap-switch/static/js/bootstrap-switch.min.js" type="text/javascript" ></script>
   <script src="${base}/assets/plugins/jquery-tags-input/jquery.tagsinput.min.js" type="text/javascript" ></script>
   <script type="text/javascript" src="${base}/assets/plugins/bootstrap-fileupload/bootstrap-fileupload.js"></script>
   <!-- END PAGE LEVEL PLUGINS -->
   <!-- BEGIN PAGE LEVEL STYLES -->
   <script src="${base}/assets/scripts/app.js"></script>
   <script src="${base}/resources/scripts/tracks-add-validation.js"></script>
   <!-- END PAGE LEVEL STYLES -->    
   <script>
      jQuery(document).ready(function() {
         // initiate layout and plugins
         App.init();
         TracksValidation.init();
         
         if (jQuery().datepicker) {
            $('.date-picker').datepicker({
                rtl: App.isRTL(),
                autoclose: true
            });
            $('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
        }
        //根据选择的客户获取联系人信息
        $("#customer_id").change(function(){
        	var customerId = $(this).val();
        	if(customerId==""){
        		$("#contacts_name").empty();
        		$("#before_track_step").val("");
        	}else{
        		$.ajax({
    	            type:"post",
    	            url:"/crm/admin/contacts!findByCustomerId.action",
    	            dataType:"json",
    	            data:"customerId="+customerId,
    	            cache:false,
    	            beforeSend:function(XMLHttpRequest){
    	            },
    	            success:function(json){
    	            	result = json.result;
    	            	if(result){
    	            		$("#contacts_name").empty();
    	            		var contactsList = json.contactsList;
    	            		var currentStep = json.currentStep;
    	            		$(contactsList).each(function(i){
						         $( "#contacts_name" ).append( "<option value='"+contactsList[i].name+"'>" +contactsList[i].name+"</option>" );
						    });
						    $("#before_track_step").val(currentStep);
    	            	}else{
    	            		alert("程序异常,请联系开发者!");
    	            	}
    	            },
    	           	complete:function(XMLHttpRequest,textStatus){
    	           	},
    	          	error:function(XMLHttpRequest,textStatus,errorThrown){
    	                   alert("网络错误，请稍后重试！");
    	          	}
                });
        	}
        });
        
        
      });
      
   </script>
   <!-- END JAVASCRIPTS -->
</body>
</html>